<template>
	<view class="tarBar-main flexR">
		<view class="tarBar-box flexC" v-for="item in tabBarList" @click="swithchPage(item)">
			<image class="icon" v-if="props.navIndex!=item.index" :src="item.icon"></image>
			<image class="icon" v-else :src="item.iconC"></image>
			<text :class="['name',props.navIndex==item.index?'nav-on':'']">{{item.name}}</text>
		</view>
	</view>
	<view class="tarBar-bottom"></view>
</template>

<script setup>
	const tabBarList = reactive([{
			index: 0,
			name: '首页',
			icon: '/static/tarBar/shouye.png',
			iconC: '/static/tarBar/shouyeC.png',
			url: '/pages/index/index'
		},
		{
			index: 1,
			name: '分类',
			icon: '/static/tarBar/fenlei.png',
			iconC: '/static/tarBar/fenleiC.png',
			url: '/pages/sort/sort'
		},
		{
			index: 2,
			name: '我的',
			icon: '/static/tarBar/wode.png',
			iconC: '/static/tarBar/wodeC.png',
			url: '/pages/my/my'
		}

	])
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const props = defineProps({
		navIndex: ''
	})
	onMounted(() => {
		console.log(props.navIndex)
	})
	const swithchPage = (val) => {
		uni.switchTab({
			url: val.url
		})
	}
</script>

<style lang="scss" scoped>
	.tarBar-main {
		width: 100vw;
		position: fixed;
		bottom: 0;
		padding: 20rpx 0 30rpx 0;
		background: white;

		.icon {
			width: 80rpx;
			height: 80rpx;
		}

		.tarBar-box {
			flex: 1;
			align-items: center;
		}

		.name {
			font-size: 26rpx;
			margin-top: 10rpx;
		}

		.nav-on {
			color: #00aa00;
		}
	}
	.tarBar-bottom{
		width: 100%;
		height: 170rpx;
	}
</style>